<template>
  <view class="edit-profile">
    <view class="avatar-container">
      <image :src="avatarUrl" mode="aspectFill"></image>
      <view class="upload-button" @click="chooseImage">上传头像</view>
    </view>
    <view class="form-container">
      <form>
        <view class="form-item">
          <view class="label">昵称</view>
          <input type="text" v-model="nickname" placeholder="请输入昵称"></input>
        </view>
        <view class="form-item">
          <view class="label">性别</view>
         <picker mode="selector" :range=" genderOptions " @change="handleChangeGender">
            <view class="picker">{{ genderOptions[genderIndex] }}</view>
          </picker>
        </view>
        <view class="form-item">
          <view class="label">生日</view>
          <picker mode="date" :value="birthday" @change="handleChangeBirthday" class="picker-view">
            <view class="picker">{{ birthday }}</view>
          </picker>
        </view>
        <view class="form-item">
          <view class="label">个性签名</view>
          <textarea v-model="signature" placeholder="请输入个性签名"></textarea>
        </view>
      </form>
    </view>
    <view class="button-container">
      <button @click="handleSubmit">保存</button>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        avatarUrl: '',
        nickname: '',
        genderOptions: ['男', '女'],
        genderIndex: 0,
        birthday: '2023-1-1',
        signature: ''
      }
    },
    methods: {
      chooseImage() {
        uni.chooseImage({
          count: 1,
          success: (res) => {
            this.avatarUrl = res.tempFilePaths[0]
          }
        })
      },
      handleChangeGender(e) {
        this.genderIndex = e.detail.value
      },
      handleChangeBirthday(e) {
        this.birthday = e.detail.value
      },
      handleSubmit() {
        // 提交表单数据
        console.log({
          avatarUrl: this.avatarUrl,
          nickname: this.nickname,
          gender: this.genderOptions[this.genderIndex],
          birthday: this.birthday,
          signature: this.signature
        })
      }
    }
  }
</script>
<style>
  .edit-profile {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
  }
  .avatar-container {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
  }
  .avatar-container image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .avatar-container .upload-button {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-radius: 20px;
    margin: 0 auto;
    width: 80px;
  }
  .form-container {
    width: 100%;
  }
  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  
 /* .picker-view{
	  width: 200px;
	  text-align: center;
  } */
  .label {
    width: 80px;
    font-size: 16px;
    color: #333;
    margin-right: 10px;
  }
  input[type=text], textarea {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
  }
  
  textarea{
	/* height: 20px;  */
  }
  
  
  .picker {
    flex: 1;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 10px;
    text-align: right;
  }
  .button-container {
    margin-top: 20px;
  }
  button {
    background-color: #8BC34A;
    color: #fff;
    border: none;
    border-radius: 4px;
    padding: 10px;
    width: 100%;
  }
</style>